<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
    <!-- Left buttons -->

    <div class="button-container" *ngIf="additionalLeftOption">
      <eqm-button 
        size="square" [height]="20" [width]="20" [enabled]="enabled"
        (pressed)="additionalLeftOption.action()"
        [eqmTooltip]="additionalLeftOption.tooltip">
        <eqm-icon [name]="additionalLeftOption.icon" [width]="additionalLeftOption.iconSize || 10" [height]="additionalLeftOption.iconSize || 10" [stroke]="2"></eqm-icon>
      </eqm-button>
    </div>

    <div class="button-container">
      <eqm-button 
        size="square" [height]="20" [width]="20" [enabled]="enabled && !selectedPreset?.isDefault"
        (pressed)="deletePreset()"
        eqmTooltip="Remove Preset">
        <eqm-icon name="minus" [width]="10" [height]="10" [stroke]="2"></eqm-icon>
      </eqm-button>
    </div>

    <!-- Presets Dropdown -->
    <eqm-dropdown
      [enabled]="enabled"
      [editable]="false" noItemsPlaceholder="No Presets" placeholder="Select Preset"
      [items]="orderedPresets"
      [selectedItem]="selectedPreset"
      labelParam="name"
      (itemSelected)="presetSelected.emit($event)"
    ></eqm-dropdown>

    <!-- Right buttons -->
    <div class="button-container">
      <eqm-button type="square" [height]="20" [width]="20" eqmTooltip="Save Preset" (pressed)="savePreset()" [enabled]="enabled">
        <eqm-icon name="cross" [width]="10" [height]="10" [stroke]="5" [rotate]="45"></eqm-icon>
      </eqm-button>
    </div>

    <div class="button-container" *ngIf="additionalRightOption">
      <eqm-button 
        size="square" [height]="20" [width]="20" [enabled]="enabled"
        (pressed)="additionalRightOption.action()"
        [eqmTooltip]="additionalRightOption.tooltip">
        <eqm-icon [name]="additionalRightOption.icon" [width]="additionalRightOption.iconSize || 10" [height]="additionalRightOption.iconSize || 10" [stroke]="2"></eqm-icon>
      </eqm-button>
    </div>

</div>